<template>
  <div class="page-common-layout progress-analysis-container">
    <div
      class="progress-analysis-body"
      :class="fullScreenStatus && 'full-screen'"
    >
      <!--  -->
      <div class="analysis-page-header">
        <!-- 网络图-图例 -->
        <div class="data-item network" v-if="tabKey == 'networkChart'">
          <div class="legend-item type_1">未开始</div>
          <div class="legend-item type_2">延期未开始</div>
          <div class="legend-item type_3">进行中</div>
          <div class="legend-item type_4">延期已开始</div>
          <div class="legend-item type_5">延期未完成</div>
          <div class="legend-item type_6">已完成</div>
          <div class="legend-item type_7">延期完成</div>
          <a-button
            v-action:jdfx_download
            :loading="exportImgLoading"
            style="margin-left:20px;"
            @click="exportImg()"
          >
            导出
          </a-button>
        </div>
        <!-- 甘特图-图例 -->
        <div class="data-item gantt" v-if="tabKey == 'ganttChart'">
          <div class="gantt-legend-warp">
            <div
              class="legend-item"
              v-for="(item, index) in nodeLevelSource"
              :key="index"
              :class="getLegendClass(item.dicItemCode)"
            >
              {{ item.dicItemName }}
            </div>
          </div>
          <a-dropdown>
            <a-menu slot="overlay" @click="ganttChangeDate($event)">
              <a-menu-item :key="1"> 日视图 </a-menu-item>
              <a-menu-item :key="2"> 周视图 </a-menu-item>
              <a-menu-item :key="3"> 月视图 </a-menu-item>
              <a-menu-item :key="4"> 季视图 </a-menu-item>
            </a-menu>
            <a-button> {{ ganttText }} <a-icon type="down" /> </a-button>
          </a-dropdown>
        </div>
        <!-- 全屏按钮 -->
        <div class="full-screen-button">
          <div
            class="btn"
            @click="handleFullScreen()"
            :title="fullScreenStatus ? '退出全屏' : '全屏'"
          >
            <a-icon
              :type="fullScreenStatus ? 'fullscreen-exit' : 'fullscreen'"
            />
          </div>
        </div>
      </div>
      <!--  -->
      <a-tabs v-model="tabKey">
        <a-tab-pane key="networkChart" tab="网络图"> </a-tab-pane>
        <a-tab-pane key="ganttChart" tab="甘特图"> </a-tab-pane>
      </a-tabs>
      <!--  -->
      <div class="body-container" v-if="!loading">
        <networkChart
          v-if="tabKey == 'networkChart'"
          :currentVersion="currentVersion"
        ></networkChart>
        <gantChart
          v-else
          :currentVersion="currentVersion"
          :visible="tabKey"
          :ganttKeyWord="ganttKeyWord"
          ref="gantChart"
        ></gantChart>
        <div class="loading-warp">
          <a-spin :spinning="loading" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/***  【进度分析】  ***/
import html2canvas from "html2canvas";
//网络图
import networkChart from "./components/networkChart.vue";
//网络图
import gantChart from "./components/ganttChart.vue";
import { getPlanControlVersionNew } from "@/api/progressManage";
import { getDicItemByCode } from "@/api/common.js";
export default {
  data() {
    return {
      tabKey: "networkChart",
      fullScreenStatus: false,
      currentVersion: {},
      //甘特图
      ganttText: "日视图",
      ganttKeyWord: 1,
      nodeLevelSource: [],
      loading: false,
      exportImgLoading: false,
    };
  },
  components: {
    networkChart,
    gantChart,
  },
  mounted() {
    this.getVersionData();
    this.getNodeLevelData();
  },
  methods: {
    //导出图片
    exportImg() {
      this.exportImgLoading = true;
      setTimeout((_) => {
        const element = document.getElementById("networkChartBody");
        // 保存原始的样式
        const originalWidth = element.style.width;
        const originalHeight = element.style.height;
        const originalOverflow = element.style.overflow;

        // 设置元素为内容的宽度和高度，移除滚动条
        element.style.width = element.scrollWidth + "px";
        element.style.height = element.scrollHeight + "px";
        element.style.overflow = "hidden";

        // 使用 html2canvas 截图
        html2canvas(element, {
          scrollX: 0,
          scrollY: 0,
          useCORS: true,
        }).then((canvas) => {
          this.exportImgLoading = false;
          // 将画布转换为图片数据URL
          const imageDataURL = canvas.toDataURL("image/png");

          // 创建一个链接元素用于下载
          const downloadLink = document.createElement("a");
          downloadLink.href = imageDataURL;
          downloadLink.download = "网络图.png";

          // 触发下载
          downloadLink.click();

          // 恢复原始的样式
          element.style.width = originalWidth;
          element.style.height = originalHeight;
          element.style.overflow = originalOverflow;
        });
      }, 500);
    },

    getLegendClass(code = "") {
      return code?.replace(".", "") || "";
    },

    //查询节点等级列表
    getNodeLevelData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "nodeLevel" })
          .then((res) => {
            let { data } = res;
            this.nodeLevelSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.nodeLevelSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询版本号
    getVersionData() {
      this.loading = true;
      return new Promise((reslove, reject) => {
        let proCode = localStorage.getItem("CURRENT_PROJECT_CODE");
        getPlanControlVersionNew({
          proCode,
        })
          .then((res) => {
            let source = res?.data ?? {};
            this.currentVersion = source;
            reslove();
          })
          .catch(() => {
            this.currentVersion = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //全屏
    handleFullScreen() {
      this.fullScreenStatus = !this.fullScreenStatus;
    },

    //切换甘特图
    ganttChangeDate(info) {
      let { key } = info;
      this.ganttKeyWord = key;
      switch (key) {
        case 1:
          this.ganttText = "日视图";
          break;
        case 2:
          this.ganttText = "周视图";
          break;
        case 3:
          this.ganttText = "月视图";
          break;
        case 4:
          this.ganttText = "季视图";
          break;
        default:
          break;
      }
      this.$nextTick(() => {
        this.$refs.gantChart.initGantt();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.progress-analysis-container {
  overflow: hidden;
  position: relative;
  .progress-analysis-body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    &.full-screen {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      border-radius: 0;
    }
    .analysis-page-header {
      position: absolute;
      top: 0;
      right: 0;
      height: 56px;
      display: flex;
      align-items: center;
      padding-right: 16px;
      z-index: 99;
      .data-item {
        display: flex;
        flex-wrap: nowrap;
        //网络图图例
        &.network {
          .legend-item {
            display: flex;
            margin-left: 24px;
            align-items: center;
            color: #666666;
            font-size: 14px;
            &::before {
              box-sizing: border-box;
              content: "";
              width: 20px;
              height: 20px;
              margin-right: 10px;
              display: flex;
              border-radius: 50%;
            }
            //未开始
            &.type_1 {
              &::before {
                border: 3px solid #d4d7d8;
              }
            }
            //延期未开始
            &.type_2 {
              &::before {
                border: 3px solid #ff3f4a;
              }
            }
            //进行中
            &.type_3 {
              &::before {
                background: url("~@/assets/img/icon_9.png");
                background-size: 100% 100%;
              }
            }
            //延期已开始
            &.type_4 {
              &::before {
                background: url("~@/assets/img/icon_10.png");
                background-size: 100% 100%;
              }
            }
            //延期未完成
            &.type_5 {
              &::before {
                background: url("~@/assets/img/icon_11.png");
                background-size: 100% 100%;
              }
            }
            //已完成
            &.type_6 {
              &::before {
                background: url("~@/assets/img/icon_12.png");
                background-size: 100% 100%;
              }
            }
            //延期完成
            &.type_7 {
              &::before {
                background: url("~@/assets/img/icon_13.png");
                background-size: 100% 100%;
              }
            }
          }
        }
        //甘特图图例
        &.gantt {
          .gantt-legend-warp {
            display: flex;
            flex-wrap: nowrap;
            margin: 0 20px;
            align-items: center;
            .legend-item {
              display: flex;
              flex-wrap: nowrap;
              align-items: center;
              color: #666666;
              font-size: 14px;
              &:not(:first-child) {
                margin-left: 16px;
              }
              &::before {
                content: "";
                display: flex;
                width: 20px;
                height: 12px;
                background: #5b78f2;
                border-radius: 2px;
                margin-right: 4px;
              }
              &.nodeLevel01 {
                &::before {
                  background-color: #5b78f2;
                }
              }
              &.nodeLevel02 {
                &::before {
                  background-color: #35b2e1;
                }
              }
              &.nodeLevel03 {
                &::before {
                  background-color: #9286ec;
                }
              }
              &.nodeLevel04 {
                &::before {
                  background-color: #f07f17;
                }
              }
              &.nodeLevel05 {
                &::before {
                  background-color: #f45d5d;
                }
              }
              &.nodeLevel06 {
                &::before {
                  background-color: #51bc64;
                }
              }
              &.nodeLevel07 {
                &::before {
                  background-color: #d251d4;
                }
              }
              &.nodeLevel08 {
                &::before {
                  background-color: #27bead;
                }
              }
            }
          }
        }
      }
      .full-screen-button {
        height: calc(100% - 5px);
        margin-left: 16px;
        background: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        .btn {
          cursor: pointer;
          width: 24px;
          height: 24px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #8c8c8c;
        }
      }
    }
    /deep/.ant-tabs {
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .ant-tabs-bar {
        flex: 1;
        height: 56px;
        margin-bottom: 0;
        padding: 0 16px;
        .ant-tabs-nav-container {
          height: 100%;
          .ant-tabs-nav-wrap {
            height: 100%;
            .ant-tabs-nav-scroll {
              height: 100%;
              .ant-tabs-nav {
                height: 100%;
                .ant-tabs-ink-bar {
                  bottom: 0;
                }
                .ant-tabs-tab {
                  height: 56px;
                  color: #8a9295;
                  font-size: 15px;
                  line-height: 36px;
                  padding: 10px 22px !important;
                  &.ant-tabs-tab-active {
                    color: #1890ff;
                  }
                }
              }
            }
          }
        }
      }
      .ant-tabs-content {
        display: none;
      }
    }
    .body-container {
      flex: 1;
      overflow: hidden;
      position: relative;
      .loading-warp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
